<template>
  <van-field
    :name="name"
    required
    :rules="[{ required: true, message: '请上传银行卡附件' }]"
    input-align="left"
    label="银行卡附件"
    label-width="80"
  >
    <template #input>
      <div class="container">
        <ul class="uploadUl">
          <li
            v-for="(item, i) in files"
            :key="i"
            :class="{
              itemBox: true,
              itemUploadStatus: !isUploadSuccess && !item.success,
            }"
          >
            <van-loading
              class="uploadLoading"
              v-if="!isUploadSuccess && !item.success"
              size="16px"
              vertical
              color="#ffffff"
              >上传中...</van-loading
            >
            <img @click="imgPreview(item)" class="itemImg" :src="item.blob" />
            <span
              class="removeFileIcon"
              name="cross"
              @click.prevent="removeFile(item)"
            >
              <span>×</span>
            </span>
          </li>
          <file-upload
            :maximum="10"
            ref="upload"
            v-model="files"
            :custom-action="customAction"
            @input-file="inputFile"
            @input-filter="inputFilter"
          >
            <div class="uploadBox">
              <img src="../assets/images/uploadImg.png" alt="" />
            </div>
          </file-upload>
        </ul>
      </div>
    </template>
  </van-field>
</template>

<script>
// 该组件暂时废弃 一般附件上传请使用commonUpload  身份证、户口本附件请使用commonUploadBySingle 
import { upload_file, get_files } from "@/api/user.js";
export default {
  name: "commonUploadBySelf",
  data() {
    return {
      isUploadFail: false,
      isUploadSuccess: false,
      files: [], // 插件使用
      fileList: [], // 传参使用
    };
  },
  props: {
    bizType: {
      type: String,
      require: false,
    },
    bizId: {
      type: String,
      require: false,
    },
    name:{
      require:false
    }
  },
  created() {
    console.log(this.bizType);
    if (this.bizId) {
      this.initImg();
    }
  },
  methods: {
    async customAction(file, component) {
      console.log(this.bizType);
      this.isUploadSuccess = false;
      console.log(file);
      let data = new window.FormData();
      data.append("file", file.file);
      let result;
      let res2 = await upload_file(data)
        .then((res) => {
          console.log(res);
          if (res.succeed) {
            result = res.data;
            this.isUploadSuccess = true;
            console.log(this.files);
            // this.fileList.push({
            //   bizType: this.bizType,
            //   fileIds: res.data.id,
            //   id: file.id,
            // });
            this.fileList = {
              bizType: this.bizType,
              fileIds: res.data.id,
              id: file.id,
            };
            
            this.$emit("updateFileList", this.fileList);
          } else {
            console.log(this.files);
            let i = this.files.findIndex((item) => {
              return item.id === file.id;
            });
            this.files.splice(i, 1);
            this.$toast.fail("上传失败");
          }
          return result;
        })
        .catch((err) => {});
      console.log(res2);
      return res2;
    },
    //   预览文件
    imgPreview(val) {},
    //   删除文件
    removeFile(item) {
      // 视图层删除附件
      console.log(item);
      this.$refs.upload.remove(item);
      let i = this.fileList.findIndex((val) => {
        return val.id == item.id;
      });
      this.fileList.splice(i, 1);
      this.$emit("updateFileList", this.fileList);
    },
    initImg() {
      let data = {
        bizId: this.bizId,
        bizType: this.bizType,
      };
      get_files(data).then((res) => {
        if (res.succeed) {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].url = this.fileUrl + res.data[i].url;
          }
          // 这里缺少附件回显方法
          this.fileList = res.data;
          this.$emit("updateFileList", this.fileList);
        }
      });
      // this.files.push({
      //   blob: "blob:http://localhost:8080/47cfac75-6d0d-4255-a7a5-8cbd573f7d54",
      //   active: false,
      //   success: true,
      //   progress: "100.00",
      // });
    },
    inputFile: function (newFile, oldFile) {
      this.isUploadSuccess = false;
      if (newFile && newFile.active === false) {
        newFile.active = true;
      }
      console.log(newFile);
      console.log(oldFile);
      //   if (newFile && newFile.response && newFile.response.succeed === true) {
      //     // 上传成功
      //     console.log(this.files);
      //     this.isUploadSuccess = true;
      //   }
      //   if (newFile && newFile.response && newFile.response.succeed === false) {
      //     // 上传失败
      //     console.log(this.files);
      //     let i = this.files.findIndex((item) => {
      //       return item.id === newFile.id;
      //     });
      //     this.files.splice(i, 1);
      //     this.$toast.fail("上传失败");
      //   }
      //    console.log(oldFile);
      //   if (newFile && oldFile && !newFile.active && oldFile.active) {
      //     // 获得相应数据
      //     console.log('response', newFile.response)
      //     if (newFile.xhr) {
      //       //  获得响应状态码
      //       console.log('status', newFile.xhr.status)
      //     }
      //   }
    },
    inputFilter: function (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 过滤不是图片后缀的文件
        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
          return prevent();
        }
      }
      if (newFile) {
        // 创建 blob 字段 用于图片预览
        newFile.blob = "";
        let URL = window.URL || window.webkitURL;
        if (URL && URL.createObjectURL) {
          newFile.blob = URL.createObjectURL(newFile.file);
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  .uploadUl {
    display: flex;
    flex-wrap: wrap;
  }
  .uploadBox {
    width: 160px;
    height: 160px;
    display: flex;
    margin: 10px;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    background-color: rgba(217, 217, 217, 0.212);
  }
  .itemBox {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 10px;
    overflow: hidden;
    .removeFileIcon {
      width: 50px;
      height: 50px;
      border-radius: 50px;
      position: absolute;
      right: -20px;
      top: -20px;
      background-color: rgba(0, 0, 0, 0.7);
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        transform: rotate(180deg);
        font-size: 20px;
        color: #fff;
        left: 8px;
        bottom: 8px;
        height: 20px;
        width: 20px;
      }
    }
    .itemImg {
      width: 100%;
      height: 100%;
    }
  }
  .itemUploadStatus {
    background-color: #636363;
    .uploadLoading {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 100%;
      justify-content: center;
    }
  }
}
</style>